<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Bootstrap 4的新增组件——旋转器和卡片</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">卡片阵列</h3>
<div class="card-deck">
    <div class="card">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">雄鹰</h5>
            <p class="card-text">天空雄鹰，没人鼓掌，也在飞翔；深山野花，没人欣赏，也在芬芳。</p>
        </div>
        <div class="card-footer">
            <small>卡片组中页脚会自动对齐</small>
        </div>
    </div>
    <div class="card">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">雄鹰</h5>
            <p class="card-text">如果你想像雄鹰一样翱翔天空，那你就要和雄鹰一起飞翔，而不要与燕为伍。</p>
        </div>
        <div class="card-footer">
            <small>卡片组中页脚会自动对齐</small>
        </div>
    </div>
    <div class="card">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3547718760,1213518458&fm=26&gp=0.jpg" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title">雄鹰</h5>
            <p class="card-text">想要在知识的天空中摘星吉月，探索宝藏，就要像雄鹰那样顽强，搏击风云，振翅翱翔！</p>
        </div>
        <div class="card-footer">
            <small>卡片组中页脚会自动对齐</small>
        </div>
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>